<template>
	<el-container class="container">
		<el-main class="content">
			<img
				class="back"
				src="./img/icon_arrow_left.png"
				@click="$router.replace('/list/:cid')"
			/>
			<div class="banner">
				<!--<el-carousel height="50vh">-->
				<!--<el-carousel-item>-->
				<!--<img :src="bannerImgs[0]" alt="" />-->
				<!--</el-carousel-item>-->
				<!--<el-carousel-item>-->
				<!--<img :src="bannerImgs[1]" alt="" />-->
				<!--</el-carousel-item>-->
				<!--<el-carousel-item>-->
				<!--<img :src="bannerImgs[2]" alt="" />-->
				<!--</el-carousel-item>-->
				<!--<el-carousel-item>-->
				<!--<img :src="bannerImgs[3]" alt="" />-->
				<!--</el-carousel-item>-->
				<!--<el-carousel-item>-->
				<!--<img :src="bannerImgs[4]" alt="" />-->
				<!--</el-carousel-item>-->
				<!--</el-carousel>-->
				<ul class="iconlogo">
					<li >
						<img :src="avatar.avatar" alt="">
					</li>
				</ul>
			</div>
			<div class="title">
				<div>
					<span class="title-mark">￥</span>
					<span class="title-price">{{ avatar.price }}</span>
				</div>
				<img src="./img/icon_product_unfavor.png" alt="" class="product" />
			</div>
			<div class="cont-brief">
				<div>
					<img src="./img/tag_self_new.png" alt="" style="width: 51px" />
					<span class="headinng">{{ avatar.name }}</span>
				</div>
				<span class="brief">{{ avatar.brief }}</span>
				<p style="color: rgb(133, 133, 133); font-size: 13px">
					小米电视选购指南<span
					style="color: rgb(153, 98, 26); font-size: 13px; line-height: 21px"
				>至高24期免息,总有一款适合你>>></span
				>
				</p>
			</div>
			<div class="poster">
				<img src="./img/lingqv.png" alt="" style="width: 100%" />
			</div>
			<span
				style="
          background-color: white;
          line-height: 40px;
          color: rgb(188, 124, 0);
          font-size: 14px;
          font-weight: bold;
          text-align: center;
        "
			>商品介绍图</span
			>
			<div>
				<img :src="otherImgs[0]" alt="" width="100%" />
				<img :src="otherImgs[1]" alt="" width="100%" />
				<img :src="otherImgs[2]" alt="" width="100%" />
				<img :src="otherImgs[3]" alt="" width="100%" />
				<img :src="otherImgs[4]" alt="" width="100%" />
				<img :src="otherImgs[5]" alt="" width="100%" />
				<img :src="otherImgs[6]" alt="" width="100%" />
				<img :src="otherImgs[7]" alt="" width="100%" />
				<img :src="otherImgs[8]" alt="" width="100%" />
				<img :src="otherImgs[9]" alt="" width="100%" />
			</div>
		</el-main>
		<el-footer class="footer">
			<div class="shop" >
				<img src="./img/mi_shop_icon.png" alt="" />
				<span>小米</span>
			</div>
			<div class="shop" @click="$router.push('/cart')">
				<img src="./img/icon_shop_cart.png" alt="" />
				<span>购物车</span>
			</div>
			<div class="pay">
				<div class="left" @click="addList({id, count })">
					<span >加入购物车</span>
				</div>
				<div class="right">
					<span>立即购买</span>
				</div>
			</div>
		</el-footer>
	</el-container>
</template>

<script>
        import {  CartApi,ProductApi,DetailsApi } from "../../api";

        export default {
                name: "Detail",
                data() {
                        return {
                                search: {
                                        name: "",
                                        cid:parseInt(this.$route.params.params),
                                        orderCol: "price",
                                        orderDir: "asc",
                                        begin: 0,
                                        pageSize: 17
                                },
                                listModel:[],
                                id: 1,
                                count: 1,
                                bannerImgs: [],
                                otherImgs: [],
                                activeId:1,
                                avatar:[]
                        };
                },
                created() {
                        this.activeId =this.$route.params.cid;
                        this.getData();
                        this.getdata();
                },

                methods: {
                        async getData() {
                                try {
                                        this.listModel = await DetailsApi.getMode(1); //获取当前id
                                        console.log(this.listModel)
                                } catch (e) {
                                        /**/
                                }
                                this.otherImgs = this.listModel.otherImgs.split(",");

                        },
                        async getdata(){
                                try{
                                        this.listModel = await ProductApi.getList(this.search);
                                        console.log(this.listModel)
                                        this.avatar=this.activeId > 0?this.listModel.find(item=>item.id===parseInt(this.activeId)):"";
                                        console.log(  this.avatar)
                                }catch(e){/**/}
                        },
                        async addList({ activeId, count }){
                                try{
                                        await this.$miConfirm("当前商品是否加入购物车?");
                                        console.log(activeId)
                                        const pid = this.activeId;
                                        await CartApi.add({ pid, count });
                                        this.$router.push('/cart')
                                }catch(e){/**/}
                        },

                },
        };
</script>

<style scoped>
	* {
		padding: 0;
		margin: 0;
	}
	.container {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}
	.content {
		flex-grow: 1;
		overflow: auto;
	}
	.back {
		width: 32px;
		height: 32px;
		position: absolute;
		top: 4px;
		left: 11px;
		z-index: 999;
	}
	.banner {
		background-color: black;
	}
	.dialog-mask{
		z-index: 999;
	}
	.el-carousel__item img {
		width: 100%;
		height: 100%;
	}
	.title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-top: 9px;
		padding-left: 12px;
		padding-right: 5px;
		background: white;
	}

	.title-mark {
		color: rgb(153, 98, 26);
		font-size: 16px;
		font-weight: 500;
		position: relative;
		top: -2px;
	}

	.title-price {
		color: rgb(153, 98, 26);
		font-size: 26px;
		font-weight: 500;
		margin-left: 2px;
	}

	.product {
		width: 40px;
	}

	.headinng {
		color: rgb(51, 51, 51);
		font-size: 16px;
		font-weight: 600;
		line-height: 25px;
	}

	.cont-brief {
		display: flex;
		flex-direction: column;
		padding-top: 10px;
		padding-left: 12px;
		padding-right: 5px;
		background: white;
	}

	.brief {
		color: rgba(0, 0, 0, 0.8);
		font-size: 12px;
		font-weight: 400;
		line-height: 18px;
		padding-left: 2px;
	}

	.cont-brief div:first-child {
		display: flex;
		align-items: center;
	}

	.poster {
		margin-top: 10px;
		height: 41.6667px;
		width: 375px;
	}
	.footer {
		flex-shrink: 0;
		height: 53px;
		border-top: 1px solid rgb(237, 237, 237);
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}
	.shop {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.shop img {
		width: 24px;
		height: 24px;
	}
	.shop span {
		color: rgb(48, 49, 51);
		font-size: 9px;
		font-weight: bold;
	}
	.pay {
		display: flex;
		align-items: center;
		background-color: rgba(255, 255, 255, 0.9);
		border-top-color: rgb(237, 237, 237);
		border-top-width: 1px;
		height: 53px;
		justify-content: space-between;
		position: relative;
	}
	.left {
		background: linear-gradient(to right, rgb(240, 206, 123), rgb(221, 177, 81));
		border-bottom-left-radius: 20px;
		border-top-left-radius: 20px;
		padding: 8px 28px;
	}
	.left span {
		color: rgb(255, 255, 255);
		font-size: 14px;
		font-weight: bold;
		margin-top: 0px;
		text-align: center;
	}
	.right {
		background: linear-gradient(to right, rgb(240, 78, 46), rgb(213, 16, 16));
		border-bottom-right-radius: 20px;
		border-top-right-radius: 20px;
		padding: 8px 28px;
	}
	.right span {
		color: rgb(255, 255, 255);
		font-size: 14px;
		font-weight: bold;
		margin-top: 0px;
		text-align: center;
	}
	.iconlogo{
		background-color: #ffffff;
	}
	.iconlogo  li img{
		width: 100%;
	}
</style>